<template>
	<el-dialog draggable v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-form ref="formRef" :rules="formRules" :model="formData" size="default" label-width="90px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="数据范围" prop="DataRang">
						<el-select style="width: 100%" v-model="formData.DataRang">
							<el-option v-for="item in rangData" :key="item" :label="item" :value="item" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="角色名称" prop="Name">
						<el-input v-model="formData.Name" placeholder="请输入部门名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="角色状态" prop="Status">
						<el-switch v-model="formData.Status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="角色描述" prop="Desc">
						<el-input v-model="formData.Desc" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
					</el-form-item>
				</el-col>
				<template v-if="formData.DataRang == '自定义'">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="自定义权限" prop="Desc">
							<el-table :data="tableData.data" ref="tableRef" row-key="Id" border @selection-change="(selection:any[])=>tableData.selection=selection" default-expand-all>
								<el-table-column prop="Name" label="部门名称"></el-table-column>
								<el-table-column prop="Desc" label="部门描述"></el-table-column>
								<el-table-column label="选择" width="70" align="center">
									<template #default="scope">
										<el-checkbox v-model="scope.row.IsAuth" size="large" />
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { Ref,ref } from 'vue';
import { Post } from '/@/common/http';
import EMsg from '/@/common/eMsg';
const emit = defineEmits(['refresh']);
const dialogShow = ref(false);
const formRef = ref();
const formRules = ref({
	Name: [{ required: true, message: '角色名称不可为空', trigger: 'blur' }],
});
const formData = ref({
	Id: 0,
	Name: '',
	Desc: '',
	Status: true,
	DataRang: '仅本人',
	Permission: '',
});

const tableRef = ref();
const tableData: Ref = ref({
	data: [],
	selection: [],
	total: 0,
});
const rangData = ref();
const onShow = (id: number) => {
	dialogShow.value = true;
	formData.value.Id = id;
	Post('SysData/GetDataRang', {}, (res: any) => {
		rangData.value = res.Data;
	});
	getRoleDept();
	if (id > 0) {
		Post('SysRole/Get', { Id: id }, (res: any) => {
			formData.value = res.Data;
		});
	}
};
const onClose = () => {
	formRef.value.resetFields();
	tableData.value.data = [];
	dialogShow.value = false;
};
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
			const selection = getSelection();
			if (selection.length > 0) {
				formData.value.Permission = selection.map((s) => s.Id).toString() + ',';
			}

			if (formData.value.Id > 0) {
				Post('SysRole/Edit', formData.value, (res: any) => {
					EMsg.success(res.Msg);
					onClose();
					emit('refresh');
				});
			} else {
				Post('SysRole/Add', formData.value, (res: any) => {
					EMsg.success(res.Msg);
					onClose();
					emit('refresh');
				});
			}
		}
	});
};

const getRoleDept = () => {
	Post('SysRole/GetRoleTreeDept', { PageSize: 1000, Id: formData.value.Id }, (res: any) => {
		tableData.value.data = res.Data;
	});
};
const getSelection = () => {
	const selection: any[] = [];
	const getRecursion = (data: any[]) => {
		for (let index = 0; index < data.length; index++) {
			if (data[index].IsAuth) {
				selection.push(data[index]);
			}
			if (data[index].children?.length > 0) {
				getRecursion(data[index].children);
			}
		}
	};
	getRecursion(tableData.value.data);
	return selection;
};

defineExpose({
	onShow,
});
</script>
